<div id="content">
	<div class="row s_page_title">
		<sa-big-breadcrumbs [items]="['系统配置','轨迹修复']" icon="fa fa-cog" class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs>
	</div>
	<div class="row top_view" >
		<form id="formContent">
			<div class="col-xs-12 form-horizontal">
				<div class="form-group col-xs-12 col-sm-6 col-lg-3">
					<label class="control-label col-xs-4" for="carNumber">车牌号</label>
					<div class="clearfix col-xs-8">
						<select name="carNumber" id="carNumberSelect2" class="chosen-select form-control" style="width:100%"></select>
					</div>
				</div>
				<div class="form-group col-xs-12 col-sm-6 col-lg-3">
					<label class="control-label col-xs-4" for="deviceId">设备ID</label>
					<div class="clearfix col-xs-8">
						<input class="form-control" name="deviceId" id="deviceId" type="text" [(ngModel)]="deviceId"/>
					</div>
				</div>
				<div class="form-group col-xs-12 col-sm-6 col-lg-3">
					<div class="input-daterange input-group">
						<input type="text" class="form-control" id="datetimepicker1">
						<span class="input-group-addon">至</span>
						<input type="text" class="form-control" id="datetimepicker2">
					</div>
				</div>
				<div class="form-group col-xs-12 col-sm-5 col-lg-3">
					<div class="col-xs-12 text-center">
						<button type="button" class="btn btn-info btn-sm" (click)="lookTrack()"><i class="ace-icon glyphicon glyphicon-map-marker align-top"></i>查看轨迹</button>
					</div>
				</div>
			</div>
			<div class="col-xs-12 form-horizontal">
				<div class="form-group col-xs-12 col-sm-6 col-lg-3">
					<label class="control-label col-xs-4 no-padding-right">起始坐标</label>
					<div class="clearfix col-xs-8">
						<input class="form-control starPoint focusInp" name="starPoint" type="text" placeholder="点击地图或输入，如：经度 ,纬度" autocomplete='address-level2'>
					</div>
				</div>
				<div class="form-group col-xs-12 col-sm-6 col-lg-3">
					<label class="control-label col-xs-4 no-padding-right">发车时间</label>
					<div class="clearfix col-xs-8">
						<input class="form-control timeType"  (change)="isTimeFormat($event.target.value)" name="runTime" type="text" placeholder="例：2018-01-01 00:00:01">
					</div>
				</div>
				<div class="form-group col-xs-12 col-sm-6 col-lg-3">
					<label class="control-label col-xs-4 no-padding-right">发车前停止</label>
					<div class="clearfix col-xs-8">
						<input class="form-control timeType" (change)="isTimeFormat($event.target.value)" name="runBefore" type="text" placeholder="例：2018-01-01 00:00:01">
					</div>
				</div>
				<div class="form-group col-xs-12 col-sm-6 col-lg-3 checkDiv">
					<div class="form-group col-xs-6">
						<label>
							<input  name="isCover" class="ace ace-checkbox-2" type="checkbox">
							<span class="lbl"> 轨迹覆盖</span>
						</label>
					</div>
					<div class="form-group col-xs-6">
						<label>
							<input name="isMakeup" class="ace ace-checkbox-2 makeupTime" type="checkbox">
							<span class="lbl"> 弥补缺失数据</span>
						</label>
					</div>
				</div>
			</div>
			<div class="col-xs-12 form-horizontal">
				<div class="form-group col-xs-12 col-sm-6 col-lg-3">
					<label class="control-label col-xs-4 no-padding-right">结束坐标</label>
					<div class="clearfix col-xs-8">
						<input class="form-control endPoint focusInp" name="endPoint" type="text" placeholder="点击地图或输入，如：经度 ,纬度" autocomplete='address-level2'>
					</div>
				</div>
				<div class="form-group col-xs-12 col-sm-6 col-lg-3">
					<label class="control-label col-xs-4 no-padding-right">完成时间</label>
					<div class="clearfix col-xs-8">
						<input class="form-control timeType" (change)="isTimeFormat($event.target.value)" name="stopTime" type="text" placeholder="例：2018-01-01 00:00:01">
					</div>
				</div>
				<div class="form-group col-xs-12 col-sm-6 col-lg-3">
					<label class="control-label col-xs-4 no-padding-right">卸货前停止</label>
					<div class="clearfix col-xs-8">
						<input class="form-control timeType" (change)="isTimeFormat($event.target.value)" name="stopBefore" type="text" placeholder="例：2018-01-01 00:00:01">
					</div>
				</div>
				<div class="form-group col-xs-12 col-sm-6 col-lg-2 checkDiv">
					<label>
						<input id="" name="isRemove" [(ngModel)]='isRemove' class="ace ace-checkbox-2" type="checkbox">
						<span class="lbl"> 移除弥补的数据</span>
					</label>
				</div>
			</div>
		</form>
		<div style="text-align: center;">
			<button class="btn btn-success btn-sm" (click)="getRodioTrack()">修复轨迹</button>
			<button class="btn btn-warning btn-sm" (click)="revokeTrack()">撤销轨迹</button>
		</div>
		<div style="padding: 12px 0;border-top:1px solid #eee;margin-top:12px;" >
			<addproblem [deviceId]='deviceId' [carNumber]='carNumber'></addproblem>
		</div>
	</div>
	
	<div class="row center_view">
		<div class="col-xs-12 col-sm-10 mapDiv">
			<div id="baiduMap" style="height: 600px;"></div>
			<sa-bmap-tools [baiduMap]="myMap" [isShowZoom]="true" [isShowCity]="false"></sa-bmap-tools>
		</div>
		<div class="col-xs-12 col-sm-2 carListView">
			<div *ngIf='isloading' class="loadImg"><img src="assets/img/loading-0.gif"  /></div>
			<div class="listTitle" title="轨迹数：{{roadLength}}条 &nbsp;&nbsp;总里程：{{totalDistance}}Km">轨迹数：{{roadLength}}条 &nbsp;&nbsp;总里程：{{totalDistance}}Km</div>
			<ul class="trackList ">
				<li class="liItem" 
					*ngFor='let item of roadListArr; let i =index' 
					[ngClass]="{selectItem: item.id === selectItem}"
					title="{{item.roadName}}&nbsp;&nbsp; [{{item.distance}}km]">
					<label class="checkInp" >
						<input class="ace ace-checkbox-2" type="radio" name='item' (click)="selectItem($event,item.id)">
						<span class="lbl"></span>
					</label>   
					<span class="sortTrack">{{i+1}}</span>&nbsp;&nbsp;&nbsp;{{item.roadName}}&nbsp;&nbsp; [{{item.distance}}km]
				</li>
			</ul>
			<div  class="row treeBtn"></div>
			<div class="eidtBtnGroup">
				<button class="btn btn-success btn-sm" id="uploadTrack"  (click)='isOpenUplod("open")'>上传</button>
				<button  class="btn btn-warning btn-sm"  (click)="delTrack()">删除</button>
			</div>
		</div>
	</div>
	<div class='uplodTrackView'  *ngIf="isUplodTrack">
    	<div class="overLay"></div>
		<div class="alertContent row">  
			<form class="form-horizontal" >
				<div class="form-group">
					<label class="control-label col-sm-2 no-padding-right" for="version">轨迹名称：</label>
					<div class="col-sm-10">
						<div class="clearfix">
							<input class="form-control" name="roadName" [(ngModel)]="roadName" type="text" placeholder="轨迹名称..." />
						</div>
					</div>
				</div>
				<div class="form-group">
					<label class="control-label col-sm-2 no-padding-right" for="description">轨迹描述：</label>
					<div class="col-sm-10">
						<div class="clearfix">
							<input class="form-control" name="remark" [(ngModel)]="remark" type="text" placeholder="轨迹描述..." />
						</div>
					</div>
				</div>
				<div class="hr hr-dotted"></div>
				<div class="form-group">
					<label class="control-label col-sm-2 no-padding-right" for="file">文件上传：</label>
					<div class="col-sm-10">
						<input type="file" id="file" name="file"  (change)="getFile($event.target.files)" />
					</div>
				</div>
				<div class="hr hr-dotted"></div>
				<div class="center">
					<button  type="button"  class="btn btn-info btn-sm" (click)='isOpenUplod("close")'><i class="fa fa-arrow-left"></i>&nbsp;取消</button>
					<button  type="button" class="btn btn-success btn-sm"  (click)='submitUpload()'><i class="fa fa-upload"></i>&nbsp;上传</button>
				</div>
			</form>
		</div>
	</div>
</div>